<template>   
    <div id="app">   
      <!-- 代码1：基础布局，24等分 -->   
      <h3>基础布局</h3>   
      <el-row>   
        <el-col :span="24"><div class="content red">:span="24"</div></el-col>   
      </el-row>   
      <el-row>   
        <el-col :span="12"><div class="content red">:span="12"</div></el-col>   
         <el-col :span="12"><div class="content green">:span="12"</div></el-col>   
       </el-row>   
       <el-row>   
         <el-col :span="8"><div class="content red">:span="8"</div></el-col>   
         <el-col :span="8"><div class="content green">:span="8"</div></el-col>   
         <el-col :span="8"><div class="content yellow">:span="8"</div></el-col>   
       </el-row>   
       <h3>带间隔的分栏</h3>   
       <!-- 代码2：带间隔的分栏 -->   
       <el-row :gutter="10">   
         <!-- 代码3：响应式分栏 xs,sm,md,lg,xl类似于Bootstrip中的 -->   
         <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">   
           <div class="content red">:gutter="10"</div>   
         </el-col>   
         <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">   
           <div class="content green"></div>   
         </el-col>   
         <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">   
           <div class="content yellow"></div>   
         </el-col>   
         <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">   
           <div class="content blue"></div>   
           32.       </el-col>   
       </el-row>   
       <!-- 代码4：偏移的分栏 -->   
       <h3>偏移的分栏</h3>   
       <el-row :gutter="20">   
         <el-col :span="12" :offset="6">   
           <div class="content green">:offset="6"</div>   
         </el-col>   
       </el-row>   
       <!-- 代码5：分栏的对齐方式-->   
       <h3>分栏的对齐方式</h3>   
       <el-row type="flex"  justify="center">   
        <el-col :span="6"><div class="content red">justify="center"</div></el-col> 
         <el-col :span="6"><div class="content green"></div></el-col>   
         <el-col :span="6"><div class="content yellow"></div></el-col>   
       </el-row>   
       <el-row type="flex"  justify="space-around">   
         <el-col :span="6"> 
            <div class="content red">justify="space-around"</div> 
          </el-col>   
         <el-col :span="6"><div class="content green"></div></el-col>   
         <el-col :span="6"><div class="content yellow"></div></el-col>   
       </el-row>   
     </div>   
   </template>   
   <script>   
   export default {   
     name: 'App'   
   }   
   </script>   
   <style>   
     .el-row{   
       margin-bottom: 20px;   
     }   
     .content{   
       height:30px;   
       border-radius: 10px;   
       line-height: 30px;   
       color: white;   
       text-align: center;   
     }   
     .red{   
       background-color: red;   
     }  
    .green{   
       background-color: green;   
     }   
     .yellow{   
       background-color: yellow;   
     }   
     .blue{   
       background-color: blue;   
     }   
   </style> 